<template>
	<view>
		<!-- 收货地址 -->
		<navigator url="/pages/address/address?source=1" class="address-section">
			<view class="order-content">
				<text class="yticon icon-shouhuodizhi"></text>
				<view class="cen">
					<view class="top">
						<text class="name">{{addressInfo.trueName}}</text>
						<text class="mobile">{{addressInfo.mobileNum}}</text>
					</view>
					<text class="address">{{addressInfo.areaAllName}}</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>

			<image class="a-bg"
				src="">
			</image>
		</navigator>

		<!-- 商品信息 -->
		<view class="goods-section">
			<view class="store">
				<uni-icons type="shop"></uni-icons>
				<text class="store-name">{{cartDto.groups[0].stoneName}}</text>
			</view>
			<view class="goods">
				<image :src="goodsInfo.goodsImagePath"></image>
				<view class="right">
					<view class="goods-name">{{goodsInfo.goodsName}}</view>
					<view class="goods-price">¥199</view>
					<view class="goods-number">x{{goodsInfo.count > 0 ? goodsInfo.count : 1}}</view>
				</view>

			</view>
			<view class="list">
				<view class="list-cell">
					<text class="title">优惠券</text>
					<text class="right-title">无</text>
				</view>
				<view class="list-cell">
					<text class="title">运费</text>
					<text class="right-title">¥0</text>
				</view>
				<view class="list-cell">
					<text class="title">备注</text>
					<input class="remark" type="text" v-model="remarks" placeholder="请填写备注信息" />
				</view>
				<view class="list-total">
					共{{goodsInfo.count > 0 ? goodsInfo.count : 0}}件商品，合计：<text class="total-price">¥999</text> (含运费¥0)
				</view>
			</view>
		</view>

		<!-- 商品结算 -->
		<view class="account-section">
			<view class="list-cell">
				<text class="title">汇总明细</text>
			</view>
			<view class="list-cell">
				<text class="sub-title">商品总额</text>
				<text class="right-title">¥999</text>
			</view>
			<view class="list-cell">
				<text class="sub-title">优惠折扣</text>
				<text class="right-title">-¥0</text>
			</view>
			<view class="list-cell">
				<text class="sub-title">费用</text>
				<text class="right-title">¥0</text>
			</view>
		</view>

		<!-- 提交订单 -->
		<view class="submit">
			<view class="account-price">
				实付款<text class="price">¥999</text>
			</view>
			<view class="submit-button" hover-class="hover-class" @click="sumbit">提交订单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId: '',
				cartDto: {},
				goodsInfo: {},
				addressInfo: {},
				remarks:'',
				buyNow:'true'
			}
		},
		onLoad(e) {
			this.goodsId = e.goodsId;
			if(!this.goodsId) {
				const payload = e.orderInfo || e.payload;
				let orderInfo = {};
				try {
					orderInfo = JSON.parse(decodeURIComponent(payload));
				} catch (error) {
					orderInfo = JSON.parse(payload);
				}
				this.cartDto = orderInfo.cartDto;
				this.goodsInfo = this.cartDto.groups[0].entrys[0];
				this.addressInfo = orderInfo.addressDto;
				this.buyNow = 'false';
			} else {
				this.creatOrder();
			}
		},
		methods: {
			creatOrder() {
				let data = {
					"head": {
						"version": "v1",
						"screenWidth": 375,
						"accesstoken": "4acab259-7185-41f9-bec7-914a48946b3f"
					},
					"body": {
						"goodsId": this.goodsId,
						"count": "1"
					}
				}

				uni.request({
					url: 'http://218.5.2.10:12580/mall/new/mobile/login/buynow.htm',
					method: 'POST',
					data: data,
					success: res => {
						let statusCode = res.data.head.status;
						let message = res.data.head.message;
						let orderInfo = res.data.body;
						if (statusCode == '200') {
							this.addressInfo = orderInfo.addressDto;
							this.cartDto = orderInfo.cartDto;
							this.goodsInfo = this.cartDto.groups[0].entrys[0];
						} else {
							this.$api.msg(message);
						}
					},
					fail: (error) => {
						console.log(error.message);
					}
				});
			},
			sumbit() {

				uni.showLoading({
					title: '跳转支付中...',
					mask: true
				});
				
				this.gotoPay();
			},
			async gotoPay() {
				let data = {
					"addressId": this.addressInfo.addrId.toString(),
					"buyNow": this.buyNow,
					"argsId": "",
					"remarks": [{
						"storeId": this.cartDto.groups[0].groupId,
						"orderRemark": this.remarks
					}]
				}
				
				let res = await this.helper.requestAPI(this.api.orderpay,data);
				let orderInfo = res.body;
				uni.navigateTo({
					url: '../payment/payment?orderDto=' + encodeURIComponent(JSON.stringify(orderInfo.orderDto))
				});

				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 100rpx;
	}

	.address-section {
		padding: 20rpx 0;
		background: #fff;
		position: relative;
		margin: 20rpx;
		border-radius: 15rpx;

		.order-content {
			display: flex;
			align-items: center;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90rpx;
			color: #888;
			font-size: 44rpx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28rpx;
			color: $font-color-dark;
		}

		.name {
			font-size: 34rpx;
			margin-right: 24rpx;
		}

		.address {
			margin-top: 16rpx;
			margin-right: 20rpx;
			color: $font-color-light;
		}

		.icon-you {
			font-size: 32rpx;
			color: $font-color-light;
			margin-right: 30rpx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5rpx;
		}
	}

	.goods-section {
		padding: 20rpx;
		background: #fff;
		margin: 20rpx;
		border-radius: 15rpx;

		.store-name {
			font-size: $uni-font-size-base;
			margin-left: 20rpx;
		}

		.goods {
			display: flex;
			margin-top: 30rpx;

			.right {
				padding: 0 20rpx;
				height: 200rpx;
				position: relative;

				.goods-name {
					font-size: $uni-font-size-sm;
				}

				.goods-price {
					position: absolute;
					font-size: $uni-font-size-sm + 2rpx;
					color: $base-color;
					bottom: 0;
				}

				.goods-number {
					position: absolute;
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;

					left: 50px;
					bottom: 0;
				}
			}

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}


	}

	.list-cell {
		display: flex;
		// justify-content: space-between;
		align-items: center;
		background: white;
		padding: 10rpx;
		position: relative;

		.title,
		.sub-title,
		.right-title {
			font-size: $uni-font-size-sm + 2rpx;
		}

		.sub-title {
			color: $font-color-light;
		}

		.right-title {
			position: absolute;
			right: 10rpx;
		}

		.remark {
			margin-left: 50rpx;
			font-size: $uni-font-size-sm;
			;
		}
	}

	.list-total {
		text-align: right;
		color: $font-color-light;
		font-size: $uni-font-size-sm;

		.total-price {
			color: $base-color;
			margin-right: 10rpx;
		}
	}

	.account-section {
		padding: 20rpx;
		background: #fff;
		margin: 20rpx;
		border-radius: 15rpx;
	}

	.submit {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100rpx;
		width: 100%;
		background: #fff;
		justify-content: space-between;
		align-items: center;

		.account-price {
			font-size: $uni-font-size-base + 2rpx;
			color: #666666;
			margin-left: 30rpx;

			.price {
				color: $base-color;
				margin-left: 20rpx;
			}
		}

		.submit-button {
			display: flex;
			align-items: center;
			justify-content: center;

			width: 300rpx;
			height: 100%;
			background: $base-color;
			color: white;
			font-size: $uni-font-size-lg;
		}
	}
	
	.hover-color {
		background-color: #eee;
	}
</style>
